<template>
  <div id="recruit">
    <el-container style="height: 100vh">
      <el-header>
        <!-- 头部信息 -->
        <el-row>
          <el-col :span="2"
            ><div class="grid-content bg-purple" style="font-size: large">
              聘途
            </div></el-col
          >
          <el-col :span="2" :offset="20"
            ><div class="grid-content bg-purple">
              <router-link
                to="/company-posmanage"
                style="color: black; font-size: larger"
                >返回</router-link
              >
            </div></el-col
          >
        </el-row>
      </el-header>
      <el-main>
        <!-- 主体内容 -->
        <!-- 筛选框 -->
        <el-row>
          <el-col :span="2" style="margin-top: 10px"
            ><div class="grid-content bg-purple">最低学历要求:</div></el-col
          >
          <el-col :span="3"
            ><div class="grid-content bg-purple">
              <el-select
                v-model="valueEdu"
                placeholder="请选择"
                @change="filterSeeker"
              >
                <el-option
                  v-for="item in options"
                  :key="item.valueEdu"
                  :label="item.label"
                  :value="item.valueEdu"
                >
                </el-option>
              </el-select></div
          ></el-col>
          <el-col
            :span="2"
            :offset="6"
            style="margin-top: 10px; font-size: larger"
            ><div class="grid-content bg-purple">
              {{ positionelem.pname }}
            </div></el-col
          >
          <el-col
            :span="2"
            :offset="9"
            style="margin-top: 10px; font-size: larger"
            ><div class="grid-content bg-purple">
              录用{{ positionelem.anumber }}/{{ positionelem.enumber }}
            </div></el-col
          >
        </el-row>
        <!-- 招聘人员 -->
        <el-table :data="formattedTableData" style="margin-top: 20px">
          <!-- 人员信息 -->
          <el-table-column width="1400">
            <template slot-scope="scope">
              <el-descriptions style="margin-bottom: 0; font-size: large">
                <el-descriptions-item label="姓名">{{
                  scope.row.sname
                }}</el-descriptions-item>
                <el-descriptions-item label="学历">{{
                  scope.row.sedu
                }}</el-descriptions-item>
                <el-descriptions-item label="性别">{{
                  scope.row.sgender
                }}</el-descriptions-item>
                <el-descriptions-item label="电话">{{
                  scope.row.sphone
                }}</el-descriptions-item>
              </el-descriptions>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column width="300">
            <template slot-scope="scope">
              <!-- 招聘员工 -->
              <!-- 查看简历 -->
              <el-button
                size="small"
                type="primary"
                @click="lookSeekerCv(scope.row)"
                >查看简历</el-button
              >
              <!-- 录用 -->
              <el-button
                size="small"
                type="success"
                @click="hire(scope.row)"
                v-if="!scope.row.flag"
                >确认录用
              </el-button>
              <!-- 取消录用 -->
              <el-button
                size="small"
                type="danger"
                @click="hire(scope.row)"
                v-else
                >取消录用</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 查看个人简历 -->
        <el-dialog :title="diatitle" :visible.sync="dialogTableVisible">
          <pre style="font-size: x-large">{{ seekercv }}</pre>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>
  

  <script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      dialogTableVisible: false,
      seekercv: "",
      diatitle: "",
      options: [
        {
          valueEdu: "选项1",
          label: "全部",
        },
        {
          valueEdu: "选项2",
          label: "小学",
        },
        {
          valueEdu: "选项3",
          label: "初中",
        },
        {
          valueEdu: "选项4",
          label: "高中",
        },
        {
          valueEdu: "选项5",
          label: "大学",
        },
        {
          valueEdu: "选项6",
          label: "研究生",
        },
        {
          valueEdu: "选项7",
          label: "博士",
        },
      ],
      valueEdu: "选项1",
    };
  },
  created() {
    this.fetchtableData();
  },
  computed: {
    positionelem() {
      return this.$route.params.ElemPos;
    },
    formattedTableData() {
      // 使用 map 方法遍历 tableData 数组，将 sedu 转换为对应的学历字符串
      return this.tableData.map((item) => {
        return {
          ...item, // 使用对象的展开语法复制所有原始属性
          sedu: this.convertSeduToString(item.sedu), // 调用方法将 sedu 转换为学历字符串
        };
      });
    },
  },
  methods: {
    fetchtableData() {
      let data4 = new FormData();
      data4.append("pid", this.positionelem.pid);
      axios
        .post("http://localhost:8080/hqdx/recruit/showRecruitSeeker", data4)
        .then((response) => {
          this.tableData = response.data.data.items;
        })
        .catch((error) => {
          console.error("There was an error fetching the people!", error); // 错误处理
        });
    },
    convertSeduToString(value) {
      switch (value) {
        case 1:
          return "小学";
        case 2:
          return "初中";
        case 3:
          return "高中";
        case 4:
          return "大学";
        case 5:
          return "研究生";
        case 6:
          return "博士";
        default:
          return ""; // 处理未知的 sedu 值
      }
    },
    lookSeekerCv(row) {
      this.diatitle = row.sname + "的个人简历";
      this.dialogTableVisible = true;
      let data = new FormData();
      data.append("sinfo", row.sinfo);
      axios
        .post("http://localhost:8080/hqdx/seeker/showSeekerCv", data)
        .then((response) => {
          this.seekercv = response.data.data.items;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    hire(row) {
      let data1 = new FormData();
      data1.append("sid", row.sid);
      data1.append("pid", this.positionelem.pid);
      data1.append("flag", row.flag);
      axios
        .post("http://localhost:8080/hqdx/recruit/QueryRecruit", data1) // 发起POST请求录用人员
        .then((response) => {
          if (response.data.message === "录用失败，已达录用人数上限") {
            alert(response.data.message);
          } else {
            this.positionelem.anumber += row.flag ? -1 : 1;//更新录用人数
            this.filterSeeker();
          }
        })
        .catch((error) => {
          console.error("There was an error filtering the people!", error); // 错误处理
        });
    },
    filterSeeker() {
      const selectedOption = this.options.find(
        (option) => option.valueEdu === this.valueEdu
      );
      let data4 = new FormData();
      data4.append("pid", this.positionelem.pid);
      data4.append("sedu", selectedOption.label);
      axios
        .post("http://localhost:8080/hqdx/recruit/SelectByEdu", data4) // 发起POST请求筛选人员
        .then((response) => {
          this.tableData = response.data.data.items; // 更新筛选后的数据
        })
        .catch((error) => {
          console.error("There was an error filtering the people!", error); // 错误处理
        });
    },
  },
};
</script>

  <style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background: linear-gradient(to top, #ffffff, #e0f7fa);
  color: #333;
  text-align: center;
}
</style>